<template>
	<div class="i-select i-input">
		<span v-if="label" class="label">{{label}}</span>
		<select @change="onChange">
			<option v-for="(item,idx) in options" :value="idx" :selected="value==item.value" :label="item.label"></option>
		</select>
	</div>
</template>
<script>
export default {
	name: "IRadio",
	props: {
		opts: Array,
		enables: Array,
		value: {},
		all: Boolean, // 是否可以选择全部
		label: { type: String, default: '' },
	},
	data() {
		return {

		}
	},
	computed: {
		options() {
			var ss = []
			if (this.all)
				ss.push({ value: null, label: typeof this.all === "string" ? this.all : '全部' });
			if (this.opts) {
				for (let i = 0; i < this.opts.length; i++) {
					let x = this.opts[i];
					ss.push({ value: i, label: x });
				}
			}
			if (this.enables)
				this.enables.forEach((x, i) => ss[i].disabled = !x);
			return ss;
		}
	},
	methods: {
		onChange(e) {
			let value = this.options[e.target.value].value
			this.$emit('input', value)
		},
	},
	mounted() {

	},
	components: {

	},
}
</script>
<style lang="less">
@import "~@/styles/define.less";
.i-select {
	position: relative;
	display: inline-block;
	font-size: 0.9rem;
	+ .i-select,
	+ .i-input {
		margin-top: 0.7rem;
	}
	> .label {
		color: #999;
		display: inline-block;
		margin-right: 0.5rem;
	}
	> .disabled {
		cursor: not-allowed;
		> span {
			opacity: 0.5;
		}
	}
	> label {
		> span {
			font-size: 0.8em;
		}
		&.active {
			> span {
				color: @blue;
			}
		}
	}
}
</style>
